<template>
  <el-select
    v-model="supplier"
    collapse-tags
    :disabled="disable"
    :multiple="multiple"
    :placeholder="placeholder"
    @change="handleChange"
    @visible-change="handleVisibleChange"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :disabled="item.disable"
      :label="item.label"
      :value="item.value"
    ></el-option>
  </el-select>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  name: 'CommonSelect',
  props: {
    disable: {
      type: Boolean,
      default: false,
    },
    value: {
      type: [String, Number, Array],
      default: '',
    },
    options: {
      type: Array,
      default: () => [],
    },
    placeholder: {
      type: String,
      default: '请选择',
    },
    multiple: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const supplier = ref(props.value);

    const handleChange = (val) => {
      emit('change', val);
    };

    const handleVisibleChange = (val) => {
      emit('visibleChange', val);
    };

    const emit = (event, ...args) => {
      if (typeof props[event] === 'function') {
        props[event](...args);
      }
    };

    // Example of lifecycle hooks in setup
    onMounted(() => {
      console.log('Component is mounted');
    });

    onUnmounted(() => {
      console.log('Component is unmounted');
    });

    return {
      supplier,
      handleChange,
      handleVisibleChange,
    };
  },
};
</script>

<style scoped lang="less">
.el-select {
  height: 32px;

  ::v-deep(.el-input__inner) {
    width: 240px;
    border-radius: 2px;
    height: 32px;
    line-height: 32px;
  }

  ::v-deep(.el-input__suffix) {
    display: grid;
    place-content: center;
  }

  ::v-deep(
      .el-range-editor.is-active,
      .el-range-editor.is-active:hover,
      .el-select .el-input.is-focus .el-input__inner
    ) {
  }

  ::v-deep(.el-input__inner) {
    padding: 0 16px 0 12px;
  }
}
</style>
